<template>
  <div>
    <t-card>
      <t-space>

        <t-card>
          <t-space :direction="direction">
            <div class="item"><a class="t-button-link" href="https://ai.rs888.net/share/index.html"
                target="_blank">分销政策说明</a> </div>
            <div class="item">
              当前可用金币(约{{userStore.assetInfo.Gold/10000}}元)
              <t-popup>
                <HelpCircleIcon size="16" />
                <template #content>
                  金币明细
                </template>
              </t-popup>
            </div>
            <div class="amount">{{userStore.assetInfo.Gold}}</div>
            <div class="detail">
              <t-link theme="primary" @click="goGlobalDetail()">收益明细</t-link>
            </div>
            <div class="opt">
              <t-button theme="danger" variant="outline" shape="round" @click="openWithdraw">提现</t-button>
            </div>
          </t-space>
        </t-card>

      <t-card>
        <t-space :direction="direction">
          <div class="item">推广链接
          <t-popup>
                <HelpCircleIcon size="16" />
                <template #content>
                  网站 https://ai.rs888.net的每个页面后添加参数code都可以做分享链接
                </template>
              </t-popup>
          </div>
          <div v-if="userStore.userInfo.user_id===''" class="detail">
            登录后查看 <t-link @click="openLogin">登录</t-link>
          </div>
          <div v-if="userStore.userInfo.user_id!==''" class="detail">
            https://ai.rs888.net/share/index.html?code={{userStore.userInfo.user_id}}

          </div>

          <div v-if="userStore.userInfo.user_id!==''" class="opt">
            <t-button theme="default" variant="outline" shape="round" @click="copy('https://ai.rs888.net/share/index.html?code='+userStore.userInfo.user_id)">复制</t-button>
          </div>
        </t-space>
      </t-card>
      </t-space>



    </t-card>

    <t-card>
      <t-tabs ref="tab" :default-value="tabIndex" :value="tabIndex" @change="tabsChange">
        <t-tab-panel :value="1" label="我的推广">
          <fansList></fansList>
        </t-tab-panel>
        <t-tab-panel :value="2" label="金币记录">
          <goldList></goldList>
        </t-tab-panel>
        <t-tab-panel :value="3" label="提现记录">
          <withdrawList></withdrawList>
        </t-tab-panel>

      </t-tabs>
    </t-card>

    <t-dialog v-model:visible="visibleWithdraw" header="金币兑换" :footer="null" width="500px">
      <withdraw @withdrawApplySuccess="visibleWithdraw=false"></withdraw>
    </t-dialog>



  </div>
</template>

<script setup lang="ts">
  import {
    nextTick,
    onMounted,
    ref
  } from 'vue'
  import {
    HelpCircleIcon
  } from 'tdesign-icons-vue-next'
  import {
    MessagePlugin
  } from 'tdesign-vue-next'
  import {
    useUserStore
  } from '@/store'
  import useClipboard from 'vue-clipboard3';
  import fansList from '../components/fansList.vue'
  import goldList from '../components/goldList.vue'
  import withdrawList from '../components/withdrawList.vue'
  import withdraw from '@/components/withdraw/index.vue'
  import $eventBus from '@/utils/eventBus'

  const openLogin=()=>{
    $eventBus.emit('OpenLoginEvent')
  }

  const tabIndex = ref(1)
  const userStore = useUserStore()

  const direction = ref('horizontal') //vertical
  const visibleWithdraw = ref(false)

  const openRecharge = () => {
    $eventBus.emit('openRecharge')
  }
  const openWithdraw = () => {
    visibleWithdraw.value = true
  }

  const tabsChange = (e:any) => {

    tabIndex.value = e
  }
  const goGlobalDetail = () => {
    tabIndex.value = 2
  }



  const {
    toClipboard
  } = useClipboard();
  const shareLink = ref('')
  const createShareInfo = () => {
    if (userStore.userInfo.user_id !== '') {
      shareLink.value = 'https://ai.rs888.net/share/index.html?code=' + userStore.userInfo.user_id
    }
  }

  const copy = (txt:string) => {

    toClipboard(txt)
      .then(() => {
        MessagePlugin.closeAll();
        MessagePlugin.success('复制成功');
      })
      .catch(() => {
        MessagePlugin.closeAll();
        MessagePlugin.error('复制失败');
      });
  }
  onMounted(()=>{
    createShareInfo();
  })
</script>

<style scoped>
  .item {
    font-size: 20px;
    align-items: center;
    line-height: 44px;
  }

  .amount {
    font-size: 32px;
    text-align: center;
    align-items: center;
    line-height: 44px;
  }

  .detail {
    text-align: center;
    align-items: center;
    line-height: 44px;
  }

  .opt {
    text-align: center;
    align-items: center;
    line-height: 44px;
  }
</style>
